<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
  <button>发送请求</button>
  <button>取消请求</button>

  <script>
    let btns = document.querySelectorAll('button')
    // 取消函数
    let cancel
    /* 
    需求: 
    点击发送请求 (延时响应) 点击取消时 取消请求
    */

    // 点击发送
    // btns[0].onclick = async() =>{
    //   axios.post('http://localhost:8081/delay-server/123', null , {
    //     cancelToken: new axios.CancelToken((c) => {
    //       // c是内部定义并传递过来取消请求的函数  回调函数在发请求前调用
    //       cancel = c
    //     })
    //   })
    // }

    btns[0].onclick = async () => {
      axios({
        url: 'http://localhost:8081/delay-server/123',
        method: 'post',
        cancelToken: new axios.CancelToken((c) => {
          cancel = c  // c是内部定义并传递过来取消请求的函数  回调函数在发请求前调用
        })
      })
    }

    btns[1].onclick = () => {
      // 调用取消函数来取消请求
      cancel && cancel()
    }


  </script>
</body>

</html>